<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title>千锋健康</title>
    <meta content="千锋健康" name="description">
    <meta content="千锋健康" name="keywords">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link href="../plugins/elementui/index.css" rel="stylesheet">
    <link href="../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <link href="../css/orderset.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <!--    此按钮用来获取obj.day数据-->
    <!--    <button type="button" @click="test()">test</button>-->
    <div class="content-header">
        <h1>预约管理<small>预约设置</small></h1>
        <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="show.html">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>预约管理</el-breadcrumb-item>
            <el-breadcrumb-item>预约设置</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="box">
            <div class="box ordersetting">
                <!--                    头部窗口下的操作处 模板下载 上传文件-->
                <el-card class="box-card">
                    <div class="boxMain">
                        <!--                            此处需要补充模板下载方法-->
                        <el-button @click="downloadTemplate()" style="margin-bottom: 20px;margin-right: 20px"
                                   type="primary">模板下载
                        </el-button>
                        <!--                            文件上传-->
                        <!--                            上传路径 后续看情况补 -->
                        <el-upload :action="token"
                                   :before-upload="beforeUpload"
                                   :on-success="handleSuccess"
                                   :show-file-list="false"
                                   name="excelFile">
                            <el-button type="primary">上传文件</el-button>
                        </el-upload>
                    </div>
                    <div>
                        操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
                    </div>
                </el-card>
                <!--                    头部窗口下的操作结束-->
                <!--                    预约界面主体-->
                <div class="calendar">
                    <!-- 年份 月份 -->
                    <div class="month">
                        <div class="currentdate">
                            <!--                            初始化方法中赋值了当前年月-->
                            <span class="choose-year">{{ currentYear }}年</span>
                            <span class="choose-month">{{ currentMonth }}月</span>
                        </div>
                        <!--                        月份跳转按钮-->
                        <div class="choose">
                            <span @click="goCurrentMonth()" class="gotoday">今天</span>
                            <span @click="pickPre(currentYear,currentMonth)">❮</span>
                            <span @click="pickNext(currentYear,currentMonth)">❯</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <!-- 星期 -->
                    <div class="caldate">
                        <!--                        该样式使得以横向排列-->
                        <ul class="weekdays">
                            <li>周一</li>
                            <li>周二</li>
                            <li>周三</li>
                            <li>周四</li>
                            <li>周五</li>
                            <li>周六</li>
                            <li>周日</li>
                        </ul>
                        <!-- 日期 -->
                        <ul class="days">
                            <!-- v-for循环 每一次循环用<li>标签创建一天 -->
                            <!--                            页面初始化时将对象赋进days中 对象有day 一个date值和index-->
                            <li v-for="dayobject in days">
                                <template>
                                    <!-- 非当前月份 -->
                                    <div class="other-month" v-if="dayobject.day.getMonth()+1 != currentMonth">
                                        {{ dayobject.day.getDate() }}
                                    </div>
                                    <!-- 当前月 -->
                                    <div class="everyday" v-if="dayobject.day.getMonth()+1 == currentMonth">
                                        <span class="datenumber">{{ dayobject.day.getDate()}}</span>

                                        <template>
                                            <template v-for="obj in leftobj">
                                                <!--                                                <template v-if="obj.orderDate ==formatDate(dayobject.day.getFullYear(),dayobject.day.getMonth()+1,dayobject.day.getDate()) ">-->
                                                <template
                                                        v-if="obj.orderDate==formatDate(dayobject.day.getFullYear(),dayobject.day.getMonth()+1,dayobject.day.getDate())">
                                                    <template v-if="obj.number > obj.reservations">
                                                        <div class="usual">
                                                            <p>{{obj.orderDate}}</p>
                                                            <p>可预约{{obj.number}}人</p>
                                                            <p>已预约{{obj.reservations}}人</p>
                                                        </div>
                                                    </template>
                                                    <template v-else>
                                                        <div class="fulled">
                                                            <p>可预约{{obj.number}}人</p>
                                                            <p>已预约{{obj.reservations}}人</p>
                                                            <p>已满</p>
                                                        </div>
                                                    </template>
                                                </template>
                                            </template>
                                            <!--                                            设置按钮的生成条件 格子所在日期大于当前日期 等于当前月 并不超过7天-->
                                            <button @click="handleOrderSet(dayobject.day)" class="orderbtn"
                                                    v-if="dayobject.day > today&&dayobject.day.getMonth()==today.getMonth()
                                                    &&dayobject.day.getDate()-today.getDate()<=7">设置
                                            </button>
                                            <!--                                            <button type="button" @click="test2(dayobject.day)">比对</button>-->
                                            <!--                                            如果已经到了月末 那么下一页的头几天也需要开放预约-->
                                            <button @click="handleOrderSet(dayobject.day)" class="orderbtn"
                                                    v-if="dayobject.day.getMonth()-today.getMonth()==1&&
                                                    dayobject.day.getDate()<8&&
                                                    (dayobject.day.getDate()==nextWeek[0]||
                                                    dayobject.day.getDate()==nextWeek[1]||
                                                    dayobject.day.getDate()==nextWeek[2]||
                                                    dayobject.day.getDate()==nextWeek[3]||
                                                    dayobject.day.getDate()==nextWeek[4]||
                                                    dayobject.day.getDate()==nextWeek[5]||
                                                    dayobject.day.getDate()==nextWeek[6])
                                                    ">设置
                                            </button>
                                            <!--                                            {{dayobject.day.getMonth()}},{{today.getMonth()}}-->
                                            <!--                                            {{dayobject.day.getDate()}},{{today.getDate()}}-->
                                        </template>

                                    </div>
                                </template>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            today: new Date(),//当前日期
            nextWeek: [],
            currentDay: 1,
            currentMonth: 1,
            LocalMonth: 1,
            currentYear: 1970,
            currentWeek: 1,
            days: [],//当前页对应月份的所有日期
            leftobj: [],//用于装载页面显示的月份已经进行预约设置的数据
            token: ""
        },
        created() {//在vue初始化时调用
            this.createInit(null);
        },
        methods: {
            //预约设置
            handleOrderSet(day) {
                this.$prompt("请输入可预约人数", "预约设置", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[0-9]*[1-9][0-9]*$/,
                    inputErrorMessage: '请输入数字'
                    //    value疑似是上面prompt框的返回值
                }).then(({value}) => {
                    //发送ajax请求，修改可预约人数
                    axios({
                        url: "http://localhost:8080/ordersetting/editNumber",
                        method: "POST",
                        data: {
                            number: value,
                            orderDate: this.formatDate(day.getFullYear(), day.getMonth() + 1, day.getDate())
                        },
                        headers: {
                            token: localStorage.getItem("security_token")
                        }
                    })
                        .then((result) => {
                            if (result.data.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: result.data.message
                                });
                                //刷新当前页面
                                this.createInit(this.formatDate(day.getFullYear(), day.getMonth() + 1, 1));
                            } else {
                                this.$message.error(result.data.message);
                            }
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },

            //上传之前进行文件格式校验
            beforeUpload(file) {
                const isXLS = file.type === 'application/vnd.ms-excel';
                if (isXLS) {
                    return true;
                }
                const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                if (isXLSX) {
                    return true;
                }
                this.$message.error('上传文件只能是xls或者xlsx格式!');
                return false;
            },
            //下载模板文件
            downloadTemplate() {
                window.location.href = "../template/ordersetting_template.xlsx";
            },
            //上传成功提示
            handleSuccess(response, file) {
                if (response.code == 200) {
                    this.$message({
                        message: response.message,
                        type: 'success'
                    });
                } else {
                    this.$message.error(response.message);
                }
                console.log(response.data);
            },
            //初始化当前页要展示的日期
            initData: function (cur) {
                let date;
                let index = 0;   //控制显示预定的天数
                //首次登录是null 走else 后续走if
                if (cur) {
                    date = new Date(cur);
                } else {
                    let now = new Date();
                    //month从0开始 所以此处定位的是上个月的第一天
                    let d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
                    d.setDate(35);//d= 2023-07-01 ==> d= 2023-08-04
                    //date = 2023-08-01 当月第一天
                    date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                }
                this.currentDay = date.getDate();
                this.currentYear = date.getFullYear();
                this.currentMonth = date.getMonth() + 1;
                this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）
                let today = new Date();
                this.LocalMonth = today.getMonth() + 1;
                //把周日的索引改更易识别
                if (this.currentWeek == 0) {
                    this.currentWeek = 7;
                }
                //str=本月第一天
                let str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
                //清空表数据
                this.days.length = 0;
                //初始化本周
                //以8.21举例 周一 i=0 运行一次 days里得到一个{day：本月第一天date，index：0} 此时index变为1
                for (let i = this.currentWeek - 1; i >= 0; i--) {
                    //此处为当前年月的第一天
                    let d = new Date(str);
                    //getDate=1 i=0 d=set到本月1号
                    d.setDate(d.getDate() - i);
                    let dayobject = {};
                    //days里第一个数据是本月1号date
                    dayobject.day = d;
                    let now = new Date();
                    if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                        dayobject.index = index++;//从今天开始显示供预定的数量
                        //    days里第一个数据的index=0
                    } else if (index != 0 && index < 3)
                        dayobject.index = index++;//从今天开始3天内显示供预定的数量
                    this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
                }
                //其他周 循环34次 共计一定35 5*7
                for (let i = 1; i <= 35 - this.currentWeek; i++) {
                    let d = new Date(str);
                    //上面本周的循环为1 此处第一次为2 最终加到35（34+1）
                    d.setDate(d.getDate() + i);
                    let dayobject = {};//dayobject   {day:date,index:2}
                    //34个date 时间从第二天的date到35天的date
                    dayobject.day = d;
                    let now = new Date();
                    if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                        dayobject.index = index++;
                    } else if (index != 0 && index < 3)
                        dayobject.index = index++;
                    this.days.push(dayobject);
                }


            },
            //切换到当前月份
            goCurrentMonth: function () {
                let d = new Date();
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            },
            //向前一个月
            pickPre: function (year, month) {
                // setDate(0); 上月最后一天
                // setDate(-1); 上月倒数第二天
                // setDate(dx) 参数dx为 上月最后一天的前后dx天
                let d = new Date(this.formatDate(year, month, 1));
                d.setDate(0);
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            },
            //向后一个月
            pickNext: function (year, month) {
                let d = new Date(this.formatDate(year, month, 1));
                d.setDate(35);////获取指定天之后的日期
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            },
            // 返回 类似 2016-01-02 格式的字符串
            formatDate: function (year, month, day) {
                let y = year;
                let m = month;
                if (m < 10) m = "0" + m;
                let d = day;
                if (d < 10) d = "0" + d;
                return y + "-" + m + "-" + d
            },
            getNextWeek() {
                let week = [];
                let date = new Date();
                let nowDate = date.getDate();//今天的日期 几号
                let nowMonth = date.getMonth();//今天的月份
                for (let i = 1; i <= 7; i++) {
                    //如果还在本月
                    if (nowMonth == date.getMonth()) {
                        date.setDate(nowDate + i);
                        week.push(date.getDate());
                        //    如果不在本月
                    } else {
                        date.setMonth(nowMonth);
                        date.setDate(nowDate + i);
                        week.push(date.getDate());
                    }
                }
                console.log("查看week");
                console.log(week);

                this.nextWeek = week;
            },
            test() {
                console.log(vm.leftobj[0])
            },
            test2(date) {
                console.log(date);
                console.log(vm.leftobj[0].orderDate)
                alert(format == vm.leftobj[0].orderDate)
            },
            createInit(currentDate) {
                let token1 = localStorage.getItem("security_token");
                //发送ajax请求，根据年月查询对应的预约设置数据，赋值给leftobj对象，用于展示
                axios({
                    url: "http://localhost:8080/ordersetting/getleftobj",
                    method: "post",
                    headers: {
                        token: token1
                    }
                }).then((result) => {
                    if (result.data.code == 200) {
                        let list = result.data.data;
                        console.log(list);
                        this.leftobj = list;
                    } else if (result.data.code == 401 || result.data.code == 504 || result.data.code == 505) {
                        this.$message.error(result.data.message);
                        location.href = "../login.html";
                    }else if(result.data.code == 403) {
                        this.$message.error(result.data.message);
                        location.href = "show.html";
                    } else {
                        this.$message.error(result.data.message);
                    }
                });
                if (currentDate == "" || currentDate == null) {
                    this.initData(null);
                } else {
                    this.initData(currentDate);
                }
                //显示能预约的一周格子
                this.getNextWeek();
                this.getToken();
            },
            getToken() {
                this.token = "http://localhost:8080/ordersetting/uploadxls?token=" + localStorage.getItem("security_token");
            }
        }//methods结束
    })//vue结束
</script>
</html>